<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">活动列表</div>
        </div>

        <div class="widget-body  am-fr">
          <div class="am-u-sm-8 am-u-md-8 am-u-lg-2">
            <div class="am-form-group">
              <el-input
                v-model="query.studentName"
                placeholder="学生姓名"
              >
              </el-input>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-input
                placeholder="手机号"
                v-model="query.studentPhoneNo"
              />
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-input
                placeholder="场次"
                v-model="query.sessionNo"
              ></el-input>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-select
                v-model="query.campusId"
                placeholder="意向校区"
                clearable
              >
                <el-option
                  v-for="(item, index) in busTeams"
                  :key="index"
                  :value="item.campusId"
                  :label="item.campusName"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-select
                v-model="query.signStatus"
                placeholder="是否签到"
                clearable
              >
                <el-option
                  :value="1"
                  label="是"
                ></el-option>
                <el-option
                  :value="0"
                  label="否"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="am-u-sm-20 am-u-md-20 am-u-lg-8 am-u-end">
            <div class="am-form-group">
              <button
                @click="handleSearch"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              ><span class="am-icon-search"></span>查询
              </button>
              <button
                @click="goExport"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              >导出
              </button>
            </div>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              empty-text="暂无数据"
              stripe
              style="min-width: 100%"
            >
              <el-table-column
                min-width="200"
                prop="activityName"
                label="活动名称"
              >
              </el-table-column>
              <el-table-column
                min-width="200"
                prop="activityStartDate"
                label="活动时间"
              >
                <template scope="scope">
                  <div>{{scope.row.activityStartDate | formatDate}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="200"
                prop="campusName"
                label="意向校区"
              >
              </el-table-column>
              <el-table-column
                min-width="200"
                prop="sessionNo"
                label="场次"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                label="学生名称"
                prop="studentName"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="studentPhoneNo"
                label="电话号码"
              >
              </el-table-column>
              <el-table-column
                min-width="300"
                prop="gradeName"
                label="年级"
              >
              </el-table-column>
              <el-table-column
                min-width="300"
                label="是否已签到"
              >
                <template scope="scope">
                  <div>{{{'0': '否', '1': '是'}[scope.row.signStatus]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="300"
                label="签到时间"
              >
                <template scope="scope">
                  <div>{{scope.row.signTime | formatTime}} {{scope.row.signTime? '' : '-'}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                label="是否转化"
              >
                <template scope="scope">
                  <div>{{isChange(scope.row)}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="300"
                label="是否在读（活动期数）"
              >
                <template scope="scope">
                  <div>{{{'0': '否', '1': '是'}[scope.row.readStatus]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="300"
                label="消息来源"
              >
                <template scope="scope">
                  <div>{{{'0': '单张广告', '1': '线上广告', '2': '电话', '3':'朋友介绍',
                    '4': '卓越老师推介', '5': '其他'
                    }[scope.row.sourceWay]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="300"
                label="是否需要一对一诊断"
              >
                <template scope="scope">
                  <div>{{{'0': '否', '1': '是'}[scope.row.diagnosisStatus]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in moreFields"
                :key="index"
                min-width="300"
                :label="item.title"
              >
                <template scope="scope">
                  <div>{{scope.row.otherMsg[item.title]}}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination
              v-bind:total="total"
              v-bind:pageNo="pageNo"
              v-bind:pageSize="pageSize"
              @paging="loadTableData"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import io from '../../lib/io'
import Pagination from '../base/Pagination.vue'
import moment from 'moment'
export default {
  data: function() {
    return {
      total: 0,
      pageSize: 10,
      pageNo: 1,
      tableData: [{}],
      query: {
        studentName: '',
        studentPhoneNo: '',
        sessionNo: '',
        campusId: '',
        signStatus: ''
      },
      activityId: '',
      moreFields: []
    }
  },
  components: {
    Pagination
  },
  watch: {
    'query.areaTeamId': function() {
      this.query.campusId = ''
    }
  },
  computed: {
    areaTeams() {
      let options = (this.$root.config.areaTeams || []).map(item => {
        if (!this.query.areaTeamId) {
          this.query.areaTeamId = item.areaTeamId
        }
        return { value: item.areaTeamId, text: item.name }
      })
      return options
    },
    busTeams: function() {
      let list = this.$root.config.campusList
      return list
    }
  },
  created() {
    let { id } = this.$route.params
    this.activityId = id
    this.loadTableData()
    this.getMoreFields()
  },
  methods: {
    isChange(row) {
      let firstReadTime = row.firstReadTime
      let signTime = row.signTime
      if (!signTime || !firstReadTime) {
        return '否'
      }
      signTime = Number(signTime)
      let lastTime = signTime - 7 * 24 * 60 * 60 * 1000
      let nextTime = signTime + 7 * 24 * 60 * 60 * 1000
      firstReadTime = Number(firstReadTime)
      if (firstReadTime <= nextTime && firstReadTime >= lastTime) {
        return '是'
      } else {
        return '否'
      }
    },
    getMoreFields() {
      io.post(
        io.findOneActivityDetail,
        { activityId: this.activityId },
        ret => {
          if (ret.success) {
            this.moreFields = ret.data.showFields || '[]'
            this.moreFields = JSON.parse(this.moreFields)
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    handleSearch() {
      this.loadTableData(1)
    },
    goExport() {
      io.downloadFile(
        io.exportActivityRegSituation,
        this.formatData(this.query),
        res => {}
      )
    },
    loadTableData(pageNo) {
      this.pageNo = pageNo || this.pageNo || 1
      this.$showLoading()
      io.post(
        io.findActivityRegSituationPage,
        Object.assign({}, this.formatData(this.query), {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }),
        ret => {
          this.$hiddenLoading()
          if (ret.success) {
            this.tableData = ret.data.list
            this.tableData = this.tableData.map(item => {
              item.otherMsg = JSON.parse(item.otherMsg)
              return item
            })
            this.total = ret.data.total
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    formatData(data) {
      return {
        studentName: data.studentName,
        activityId: this.activityId,
        studentPhoneNo: data.studentPhoneNo,
        sessionNo: data.sessionNo,
        campusId: data.campusId,
        signStatus: data.signStatus
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
